<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { workspaceIndexer } from '@/services/WorkspaceIndexer';
import { WorkspaceDiagnosticService } from '@/services/workspaceDiagnosticService';

const { t } = useI18n();

// 工作区索引器响应式数据
const progress = workspaceIndexer.progress;
const isIndexing = workspaceIndexer.isIndexing;
const progressPercent = workspaceIndexer.progressPercent;
const estimatedTimeRemaining = workspaceIndexer.estimatedTimeRemaining;

// 诊断服务响应式数据
const diagnosticService = WorkspaceDiagnosticService.instance;
const diagnosticProgress = diagnosticService.progress;
const isDiagnosticScanning = diagnosticService.isScanning;
const diagnosticProgressPercent = diagnosticService.progressPercent;
const diagnosticEstimatedTime = diagnosticService.estimatedTimeRemaining;

// 计算属性
const statusText = computed(() => {
  const p = progress.value;
  
  switch (p.phase) {
    case 'scanning':
      return '正在扫描目录结构...';
    case 'building':
      return '正在构建目录索引...';
    case 'complete':
      return '目录索引构建完成';
    case 'error':
      return '索引构建失败';
    default:
      return '就绪';
  }
});

const progressText = computed(() => {
  const p = progress.value;
  if (p.totalCount === 0) return '';
  
  return `${p.processedCount}/${p.totalCount}`;
});

const timeText = computed(() => {
  const remaining = estimatedTimeRemaining.value;
  if (!remaining || remaining <= 0) return '';
  
  if (remaining < 60) {
    return `剩余 ${remaining}s`;
  } else {
    const minutes = Math.floor(remaining / 60);
    const seconds = remaining % 60;
    return `剩余 ${minutes}m ${seconds}s`;
  }
});

const elapsedTime = computed(() => {
  const p = progress.value;
  if (!p.startTime) return '';
  
  const elapsed = p.endTime ? (p.endTime - p.startTime) : (Date.now() - p.startTime);
  const seconds = Math.floor(elapsed / 1000);
  
  if (seconds < 60) {
    return `${seconds}s`;
  } else {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}m ${remainingSeconds}s`;
  }
});

// 取消索引构建
function cancelIndexing() {
  workspaceIndexer.cancelIndexing();
}

// 诊断扫描相关计算属性
const diagnosticStatusText = computed(() => {
  const p = diagnosticProgress.value;
  
  switch (p.phase) {
    case 'discovering':
      return '正在发现文件...';
    case 'analyzing':
      return '正在分析代码问题...';
    case 'complete':
      return '代码分析完成';
    case 'error':
      return '代码分析失败';
    default:
      return '代码分析就绪';
  }
});

const diagnosticProgressText = computed(() => {
  const p = diagnosticProgress.value;
  if (p.totalFiles === 0) return '';
  
  return `${p.processedFiles}/${p.totalFiles}`;
});

const diagnosticTimeText = computed(() => {
  const remaining = diagnosticEstimatedTime.value;
  if (!remaining || remaining <= 0) return '';
  
  if (remaining < 60) {
    return `剩余 ${remaining}s`;
  } else {
    const minutes = Math.floor(remaining / 60);
    const seconds = remaining % 60;
    return `剩余 ${minutes}m ${seconds}s`;
  }
});

const diagnosticElapsedTime = computed(() => {
  const p = diagnosticProgress.value;
  if (!p.startTime) return '';
  
  const elapsed = p.endTime ? (p.endTime - p.startTime) : (Date.now() - p.startTime);
  const seconds = Math.floor(elapsed / 1000);
  
  if (seconds < 60) {
    return `${seconds}s`;
  } else {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}m ${remainingSeconds}s`;
  }
});

// 取消诊断扫描
function cancelDiagnosticScan() {
  diagnosticService.cancelScan();
}
</script>

<template>
  <div class="h-6 bg-panel-bg border-t border-panel-border px-3 py-1 flex items-center text-xs">
    <!-- 左侧：状态信息 -->
    <div class="flex items-center gap-4 flex-1 min-w-0">
      <!-- 工作区索引状态 -->
      <div class="flex items-center gap-2">
        <!-- 状态图标 -->
        <div class="flex-shrink-0">
          <div
            v-if="progress.phase === 'scanning' || progress.phase === 'building'"
            class="w-3 h-3 border border-accent border-t-transparent rounded-full animate-spin"
          ></div>
          <div
            v-else-if="progress.phase === 'complete'"
            class="w-3 h-3 rounded-full bg-green-500 flex items-center justify-center"
          >
            <svg class="w-1.5 h-1.5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </div>
          <div
            v-else-if="progress.phase === 'error'"
            class="w-3 h-3 rounded-full bg-red-500 flex items-center justify-center"
          >
            <svg class="w-1.5 h-1.5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </div>
          <div v-else class="w-3 h-3 rounded-full bg-muted-fg/30"></div>
        </div>

        <!-- 状态文本 -->
        <div class="flex items-center gap-2 min-w-0">
          <span class="text-panel-fg font-medium truncate">{{ statusText }}</span>
          
          <!-- 当前扫描路径 -->
          <span 
            v-if="progress.currentPath && (progress.phase === 'scanning' || progress.phase === 'building')"
            class="text-muted-fg truncate max-w-48"
            :title="progress.currentPath"
          >
            • {{ progress.currentPath }}
          </span>
          
          <!-- 错误信息 -->
          <span 
            v-if="progress.error && progress.phase === 'error'"
            class="text-red-500 truncate max-w-48"
            :title="progress.error"
          >
            • {{ progress.error }}
          </span>
        </div>
      </div>

      <!-- 分隔符 -->
      <div 
        v-if="isDiagnosticScanning || diagnosticProgress.phase !== 'idle'"
        class="w-px h-4 bg-panel-border"
      ></div>

      <!-- 诊断扫描状态 -->
      <div 
        v-if="isDiagnosticScanning || diagnosticProgress.phase !== 'idle'"
        class="flex items-center gap-2"
      >
        <!-- 诊断状态图标 -->
        <div class="flex-shrink-0">
          <div
            v-if="diagnosticProgress.phase === 'discovering' || diagnosticProgress.phase === 'analyzing'"
            class="w-3 h-3 border border-blue-500 border-t-transparent rounded-full animate-spin"
          ></div>
          <div
            v-else-if="diagnosticProgress.phase === 'complete'"
            class="w-3 h-3 rounded-full bg-blue-500 flex items-center justify-center"
          >
            <svg class="w-1.5 h-1.5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </div>
          <div
            v-else-if="diagnosticProgress.phase === 'error'"
            class="w-3 h-3 rounded-full bg-red-500 flex items-center justify-center"
          >
            <svg class="w-1.5 h-1.5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>

        <!-- 诊断状态文本 -->
        <div class="flex items-center gap-2 min-w-0">
          <span class="text-panel-fg font-medium truncate">{{ diagnosticStatusText }}</span>
          
          <!-- 当前分析文件 -->
          <span 
            v-if="diagnosticProgress.currentFile && (diagnosticProgress.phase === 'discovering' || diagnosticProgress.phase === 'analyzing')"
            class="text-muted-fg truncate max-w-32"
            :title="diagnosticProgress.currentFile"
          >
            • {{ diagnosticProgress.currentFile }}
          </span>
          
          <!-- 诊断错误信息 -->
          <span 
            v-if="diagnosticProgress.error && diagnosticProgress.phase === 'error'"
            class="text-red-500 truncate max-w-48"
            :title="diagnosticProgress.error"
          >
            • {{ diagnosticProgress.error }}
          </span>
        </div>
      </div>
    </div>

    <!-- 右侧：进度信息和操作 -->
    <div class="flex items-center gap-3 flex-shrink-0">
      <!-- 工作区索引进度信息 -->
      <div 
        v-if="progress.phase === 'scanning' || progress.phase === 'building'"
        class="flex items-center gap-2 text-muted-fg"
      >
        <span v-if="progressText">{{ progressText }}</span>
        <span v-if="progressPercent.value > 0">({{ progressPercent.value }}%)</span>
        <span v-if="timeText">{{ timeText }}</span>
        
        <!-- 小进度条 -->
        <div class="w-16 bg-subtle-bg rounded-full h-1.5 ml-1">
          <div
            class="bg-accent h-1.5 rounded-full transition-all duration-300 ease-out"
            :style="{ width: `${progressPercent.value || 0}%` }"
          ></div>
        </div>
      </div>

      <!-- 诊断扫描进度信息 -->
      <div 
        v-if="diagnosticProgress.phase === 'discovering' || diagnosticProgress.phase === 'analyzing'"
        class="flex items-center gap-2 text-muted-fg"
      >
        <span v-if="diagnosticProgressText">{{ diagnosticProgressText }}</span>
        <span v-if="diagnosticProgressPercent.value > 0">({{ diagnosticProgressPercent.value }}%)</span>
        <span v-if="diagnosticTimeText">{{ diagnosticTimeText }}</span>
        
        <!-- 诊断进度条 -->
        <div class="w-16 bg-subtle-bg rounded-full h-1.5 ml-1">
          <div
            class="bg-blue-500 h-1.5 rounded-full transition-all duration-300 ease-out"
            :style="{ width: `${diagnosticProgressPercent.value || 0}%` }"
          ></div>
        </div>
      </div>

      <!-- 工作区索引完成时间信息 -->
      <div 
        v-if="progress.phase === 'complete' && elapsedTime"
        class="text-muted-fg"
      >
        索引用时 {{ elapsedTime }}
      </div>

      <!-- 诊断完成时间信息 -->
      <div 
        v-if="diagnosticProgress.phase === 'complete' && diagnosticElapsedTime"
        class="text-muted-fg"
      >
        分析用时 {{ diagnosticElapsedTime }}
      </div>

      <!-- 操作按钮 -->
      <div class="flex items-center gap-1">
        <!-- 取消索引按钮 -->
        <button
          v-if="progress.phase === 'scanning' || progress.phase === 'building'"
          @click="cancelIndexing"
          class="px-1.5 py-0.5 rounded text-xs border-panel-border bg-panel-bg text-panel-fg hover:bg-subtle-bg transition-colors"
        >
          取消索引
        </button>

        <!-- 取消诊断按钮 -->
        <button
          v-if="diagnosticProgress.phase === 'discovering' || diagnosticProgress.phase === 'analyzing'"
          @click="cancelDiagnosticScan"
          class="px-1.5 py-0.5 rounded text-xs border-panel-border bg-panel-bg text-panel-fg hover:bg-subtle-bg transition-colors"
        >
          取消分析
        </button>
      </div>
    </div>
  </div>
</template>
